<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 文本差值{{}} -->
        <h1>{{count}}</h1>
        <h1>{{count + 1 }}</h1>
        <h1>{{count ==0 ? '女':'男'}}</h1>
        <!-- 如果要修改响应式数据，在视图中需要通过世间的触发才可以 -->
        <button @click="count=1">按钮</button>
        <h1>{{test()}}</h1>
        <h1>文本差值：{{msg}}</h1>
        <!-- v-text：文本数据渲染 -->
        <h2 v-text="msg">文本text</h2>

        <!-- v-html：文本标签数据渲染 -->
        <h3 v-html="tag"></h3>
        <h3 v-html="msg">文本html</h3>

        <!-- 共同点：都可以渲染文本数据 -->
        <!-- 不同点：只有v-html可以渲染标签文本，
            {{}} 渲染不会覆盖原有标签里的内容，
        v-text、v-html会覆盖原有标签里的内容-->
    </div>
</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue

    createApp({
        setup() {
            const count = ref(0)
            const msg = ref('文本数据')
            const tag = ref('<i>标签数据</i>')
                //函数方法
            function test() {
                return 'Hello'
            }

            return {
                count,
                test,
                msg,
                tag
            }
        }
    }).mount('#app')
</script>